Introduction:
In this article we will explain how to validate form input controls using knockoutjs or what is extend method in knockoutjs or why use extend method in knockoutjs.
Description:
Knockout provide client-side validation by using extender. It notifying to user when that value changes of input fields (input, textarea, select).
The following demo Knockout validation via extender
Code here----
Adding validation to an observable
When we need to implement validation rules in an observable we should use to extenders with following library.
<script src="/Scripts/knockout-3.4.1.js"></script>
<script src="/Scripts/knockout.validation.js"></script>
As you can see above , ko.validation.init({ … }) function must be initialized with the options given below.
- registerExtenders: registers custom validation rules defined via ko.validation.rules.
- messagesOnModified: indicates whether the validation messages are triggered only when the properties are modified or not at all times.
- insertMessages: If true validation will insert either a <span> element or the template specified by messageTemplate after any element (<input>), which uses a KO value binding with a validated field.
- parseInputAttributes: indicates whether to assign the validation rules to your ViewModel, using HTML5 validation attributes.
- errorClass: defines CSS class assigned to both <input> and validation message elements.
When We need to add an extender, which allows an observable to be required and minLength: 2 characters and maxLength: 17 characters.
FirstName: ko.observable().extend({ required: true, minLength: 2, maxLength:17})
When We need to add an extender that allows an observable to be required and Phone Number pattern, as shown below.
PhoneNumber:ko.observable().extend({ required: true, pattern: { message: 'Phone Number is not vailid.', params: '^06-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}$' } })
When We need to add an extender that allows to compare password as show below.
- Validator : accepts function as a parameter, which will compare the password.
- Message : accepts the string message, which will be displayed, if the error has occurred.
- params : provides the password field, which will be compared.
var checkPassword = function (val, other) { return val == other; } Password: ko.observable().extend({required: true }), //ConfirmPassword viewModel.ConfirmPassword = ko.observable().extend({ validation: { validator: checkPassword, message: 'Please check your password !', params: viewModel.Password } })
Output:
I hope this article will help to you.
Leave Comment